<img src="images/map.jpg" border="0" usemap="#Map" id="map_main" />
<br><br>
<h3>History of Donsol</h3>
<br />
<strong>Vision</strong>
<div align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper vehicula molestie. Aenean facilisis nibh vel odio blandit pretium eget ut nisi. Suspendisse vitae ante quis magna faucibus fermentum. Integer laoreet consectetur massa, id iaculis tellus interdum nec. Aenean vel lectus a eros mattis iaculis. In gravida porttitor dapibus. Duis pretium odio sit amet odio volutpat sed faucibus risus adipiscing. Duis in lobortis tellus. Suspendisse quis est porttitor nisl hendrerit lobortis.</div>
<br />
<strong>Mission</strong>
<div align="justify">Proin et odio orci, sit amet porttitor metus. Aliquam eu velit enim. Morbi tortor odio, pretium vitae interdum ut, posuere et erat. Vivamus laoreet, nisi scelerisque pulvinar semper, justo justo semper nisi, vitae posuere mauris nunc a purus. In hac habitasse platea dictumst. Morbi congue pulvinar lorem, et lobortis elit pharetra nec. Quisque et eros sed eros volutpat blandit vitae a nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam felis mauris, commodo vel condimentum et, gravida vitae massa. Aenean blandit arcu quis dui bibendum volutpat lobortis ante aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse nec est augue. Nulla eget ante neque, eu pretium arcu.</div>

<map name="Map">  
  <?php
  	$result = mysql_query("SELECT * FROM `places`");
	while($getPlaces = mysql_fetch_assoc($result)){
		echo '<area rel="'.$getPlaces['id'].'" href="index.php?act=place&id='.$getPlaces['id'].'" style="cursor:pointer" shape="circle" coords="'.$getPlaces['coordinates'].',10">';
	}
  ?>  
  <!-- ADD NEW POINTS HERE -->
  <!--
  <area rel="1" class="selector" shape="circle" coords="276,206,7" href="#">
  <area rel="2" class="selector" shape="circle" coords="360,297,7" href="#">-->
</map>

<script type="text/javascript">
$(document).tooltip({
	items: "area",
	content: function() {
		return $('<div></div>').load("map.get.php?id="+encodeURIComponent($(this).attr('rel')));
	},
	track: true
    });
		
$("#map_main").click(function(e) {
    var offset = $(this).offset();
    //alert(e.clientX - offset.left);
   //alert(e.clientY - offset.top);
   var x = e.pageX - $(this).offset().left;
	var y = e.pageY - $(this).offset().top;
	var tmp = $('<div title="Create a Point"><label for="createpoint_name">Place Name</label> <input id="createpoint_name" value="" /><br /><label for="createpoint_coor">Coordinates</label> <input id="createpoint_coor" value="'+x+','+y+'"/></div>').prependTo('body').dialog({
			modal: true,
			buttons: {
				"Create": function(){
					$.post("map.handler.php", {
						createpoint: "createpoint",
						createpoint_name: $("#createpoint_name").val(),
						createpoint_coor: $("#createpoint_coor").val()
					});
					
					$( this ).remove();
				}
				,
				Cancel: function() {
					$( this ).remove();
				}
			}
	});
	
});
</script>